<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 5px pink solid;
            position: relative;
        }

        p {
            width: 150px;
            height: 150px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">
        <p style="top: 0% ; left: 2%;">1</p>
        <p style="top: 0% ; left: 35%;">2</p>
        <p style="top: 0% ; left: 68%;">3</p>
        <p style="top: 32% ; left: 2%;">4</p>
        <p style="top: 32% ; left: 35%;">5</p>
        <p style="top: 32% ; left: 68%;">6</p>
        <p style="top: 65% ; left: 2%;">7</p>
        <p style="top: 65% ; left: 35%;">8</p>
        <p style="top: 65% ; left: 68%;">9</p>
    </div>
    <script>
        var p = document.querySelectorAll("p")

        p.forEach(function (item) {
            function xx(max, min) {
                return parseInt(Math.random() * (max + 1 - min) + min)
            }
            item.style.background = `rgb(${xx(255, 0)},${xx(255, 0)},${xx(255, 0)})`
            item.onmousedown = function (event) {
                this.style.transition = "none"
                var obj = {}
                obj.left = this.style.left
                obj.top = this.style.top
                var maX;
                var e = event || window.event
                var offx = this.offsetLeft
                var offy = this.offsetTop
                var x = e.clientX - offx
                var y = e.clientY - offy
                this.onmousemove = function (event) {
                    var e = event || window.event
                    var xx = e.clientX
                    var yy = e.clientY
                    var movex = xx - x
                    var movey = yy - y
                    item.style.top = movey + "px"
                    item.style.left = movex + "px"
                    item.onmouseup = function () {
                        document.onmousemove = ""
                        item.style.top = obj.top
                        item.style.left = obj.left
                    }
                }
            }
        })
    </script>
</body>

</html>